<template>
  <div class="table-box">
    <el-table :data="tableData" :border="tableConfig.border" style="width: 100%">

      <el-table-column
        v-for="item in tableConfig.list"
        :key="item.label"
        :fixed="item.fixed || false"
        :type="item.type || 'default'"
        :label="item.label || ''"
        :prop="item.prop || ''"
        :align="item.align || 'left'"
        :header-align="item.headerAlign || 'left'"
        :width="item.width || 100"
        :min-width="item.minWidth || ''"
        :show-overflow-tooltip="item.showOverflowTooltip || false"
      >

        <template #default="scope" v-if="item?.type == 'index' ">
          <div>{{ scope.$index + 1 }}</div>
        </template>

        <!-- 操作按钮组 -->
        <template #default="scope" v-else-if="item.btnGroup">
          <el-button
            v-for="btn in item.btnGroup"
            :key="btn.text"
            link
            :type="btn.type || 'primary'"
            :size="btn.size || 'small'"
            @click="() => btn.onClick(scope.row)"
            >{{ btn.text }}</el-button
          >
        </template>

        <template #default="scope" v-else>
          <div :style="isFunction(item.styleFormatter) ? item.styleFormatter(scope.row[item.prop]) : ''">
            {{ isFunction(item.formatter) ? item.formatter(scope.row[item.prop], item.prop, scope) : scope.row[item.prop] }}
          </div>
        </template>
        
      </el-table-column>

    </el-table>
  </div>

</template>

<script setup name="user">
import { ref, reactive } from "vue";
import { isFunction } from '@/utils/index';

const props = defineProps(['tableData', 'tableConfig'])


</script>

<style lang="less" scoped>

.table-box {
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
}

</style>
